<template>
  <div class="search" ref="searchMain">
    <!-- 点击空白区域关闭某个div图层 -->
    <el-card>
      <el-button @click="togglePanel">点击</el-button>
      <div v-show="visible">弹出层</div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "MaskLayer",
  data() {
    return {
      visible: false
    };
  },
  methods: {
    // 点击空白区域关闭某个div图层
    togglePanel() {
      this.visible ? this.hide() : this.show();
    },
    // 显示
    show() {
      this.visible = true;
      document.addEventListener("click", this.hidePanel, false);
    },

    // 隐藏
    hide() {
      this.visible = false;
      document.removeEventListener("click", this.hidePanel, false);
    },

    hidePanel(e) {
      if (!this.$refs.searchMain.contains(e.target)) {
        this.hide();
      }
    }
  }
};
</script>
<style scoped></style>
